<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食刻日记 - 页面原型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.6;
            background: #F5F5F5;
            margin: 0 auto;
            position: relative;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .heading {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            color: #333;
        }
        .prototype-area {
            display: flex;
            gap: 20px;
        }
        .prototype-column {
            flex: 0 0 414px;
        }
        .description-column {
            flex: 1;
        }
        .card {
            margin-bottom: 20px;
            background: white;
            border: 1px solid #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        .card-header {
            background: #F5F5F5;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-content {
            padding: 16px;
        }
        .note {
            background: #FFFBE6;
            border: 1px solid #FFE58F;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 16px;
            color: #D48806;
        }
        .prototype-preview {
            max-width: 414px;
            margin: 0 auto;
            border: 1px solid #ddd;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        .prototype-nav {
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            color: white;
            padding: 8px 16px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }
        .prototype-content {
            padding: 16px;
            min-height: 400px;
            position: relative;
        }
        .add-button {
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            color: white;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin: 20px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .tag {
            display: inline-block;
            padding: 4px 12px;
            background: #FFF0F0;
            border-radius: 20px;
            font-size: 12px;
            color: #FF9898;
            margin: 4px 4px 4px 0;
            border: 1px solid #FFE4E4;
        }
        .tab-bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            height: 100%;
            color: #999;
        }
        .tab-item.active {
            color: #FF9898;
        }
        .tab-icon {
            font-size: 24px;
            margin-bottom: 2px;
        }
        .tab-text {
            font-size: 12px;
        }
        .field-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            border-bottom: 1px solid #F0F0F0;
            padding-bottom: 12px;
        }
        .field-label {
            width: 100px;
            color: #666;
        }
        .field-input {
            flex: 1;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        textarea {
            min-height: 80px;
        }
        .button {
            padding: 6px 16px;
            background: #1890FF;
            color: white;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            cursor: pointer;
        }
        .button-secondary {
            background: #F0F0F0;
            color: #666;
        }
        .requirement {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #eee;
        }
        .requirement:last-child {
            border-bottom: none;
        }
        .requirement-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #1F3B64;
        }
        .requirement-desc {
            color: #666;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="heading">界面原型-主页</div>
        
        <div class="card">
            <div class="card-header">
                <span>设计说明</span>
            </div>
            <div class="card-content">
                <div class="note">
                    <strong>设计说明：</strong> 本原型遵循微信小程序的设计规范，界面简洁清晰，交互流畅自然。使用柔和的色彩方案，以提高用户体验。
                </div>
            </div>
        </div>

        <div class="prototype-area">
            <div class="prototype-column">
                <div class="card">
                    <div class="card-header">
                        <span>首页概览</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🍽️ 食刻日记
                            </div>
                            <div class="prototype-content">
                                <div style="padding: 0 16px;">
                                    <div style="margin-bottom: 24px; text-align: center;">
                                        <div style="font-size: 24px; font-weight: 600; margin-bottom: 8px; color: #333; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">食刻日记</div>
                                        <div style="font-size: 14px; color: #999; margin-bottom: 20px;">记录每一餐，品味每一天</div>
                                    </div>
                                    
                                    <div style="background: white; border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                        <div style="display: flex; flex-direction: column; align-items: center;">
                                            <div style="width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #FF9898, #FFB6C1); color: white; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(255,152,152,0.3);">
                                                85
                                            </div>
                                            <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px;">今日饮食健康评分</div>
                                            <div style="font-size: 13px; color: #999;">较昨日 +2分</div>
                                        </div>
                                    </div>

                                    <div style="margin-bottom: 24px;">
                                        <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">今日粮仓</div>
                                        <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                            <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                                    <div style="font-size: 20px;">🍜</div>
                                                </div>
                                                <div style="flex: 1;">
                                                    <div style="font-size: 14px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 8px;">今日午餐</div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">红烧牛肉面</div>
                                                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                                        <span class="tag">🍚 主食</span>
                                                        <span class="tag">🌶️ 川菜</span>
                                                        <span class="tag">🥩 高蛋白</span>
                                                    </div>
                                                </div>
                                                <div style="color: #999; font-size: 16px;">❯</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div style="margin-bottom: 24px;">
                                        <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">智能推荐</div>
                                        
                                        <!-- 添加用餐类型选择 -->
                                        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
                                            <div style="padding: 8px 16px; background: #FFF0F0; color: #FF9898; border-radius: 20px; font-size: 14px; cursor: pointer;" data-meal-type="breakfast" onclick="showRecommendation('breakfast')">早餐</div>
                                            <div style="padding: 8px 16px; background: #f5f5f5; color: #666; border-radius: 20px; font-size: 14px; cursor: pointer;" data-meal-type="lunch" onclick="showRecommendation('lunch')">午餐</div>
                                            <div style="padding: 8px 16px; background: #f5f5f5; color: #666; border-radius: 20px; font-size: 14px; cursor: pointer;" data-meal-type="dinner" onclick="showRecommendation('dinner')">晚餐</div>
                                        </div>
                                        
                                        <!-- 早餐推荐，默认显示 -->
                                        <div id="breakfast-recommendations" class="meal-recommendations" style="overflow-x: auto; white-space: nowrap; padding: 4px 0; -webkit-overflow-scrolling: touch;">
                                            <div style="display: inline-flex; gap: 12px; padding: 4px 0;">
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥣</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">燕麦粥</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">富含纤维</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥚</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">水煮蛋</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">高蛋白</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥛</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">酸奶</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">益生菌</div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 午餐推荐，默认隐藏 -->
                                        <div id="lunch-recommendations" class="meal-recommendations" style="overflow-x: auto; white-space: nowrap; padding: 4px 0; -webkit-overflow-scrolling: touch; display: none;">
                                            <div style="display: inline-flex; gap: 12px; padding: 4px 0;">
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥬</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">清炒时蔬</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">低卡路里</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🐟</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">水煮鱼</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">高蛋白</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🍚</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">糙米饭</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">粗粮</div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 晚餐推荐，默认隐藏 -->
                                        <div id="dinner-recommendations" class="meal-recommendations" style="overflow-x: auto; white-space: nowrap; padding: 4px 0; -webkit-overflow-scrolling: touch; display: none;">
                                            <div style="display: inline-flex; gap: 12px; padding: 4px 0;">
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥒</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">凉拌黄瓜</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">清淡爽口</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🍜</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">番茄豆腐汤</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">低热量</div>
                                                </div>
                                                
                                                <div style="background: white; border-radius: 16px; padding: 20px; min-width: 160px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                                    <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                                                        <div style="font-size: 24px;">🥦</div>
                                                    </div>
                                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">西兰花</div>
                                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block;">富含维生素</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="background: linear-gradient(135deg, #FF9898, #FFB6C1); border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(255,152,152,0.3); display: flex; align-items: center;">
                                        <div style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; margin-right: 16px;">
                                            <div style="font-size: 24px; color: white;">+</div>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 16px; font-weight: 500; color: white; margin-bottom: 4px;">记录新餐品</div>
                                            <div style="font-size: 13px; color: rgba(255,255,255,0.8);">点击添加今日饮食粮仓</div>
                                        </div>
                                        <div style="color: white; font-size: 18px;">❯</div>
                                    </div>
                                </div>

                                <div class="tab-bar">
                                    <div class="tab-item active">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </div>
                                    <div class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <div class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </div>
                                    <div class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>🍚 添加食品粮仓</span>
                    </div>
                    <div class="card-content">
                        <div style="background: #FFC1C1; color: white; padding: 16px; border-radius: 12px; margin-bottom: 20px;">
                            <div style="font-size: 18px; margin-bottom: 8px;">🍽️ 添加食品粮仓</div>
                        </div>
                        
                        <div style="display: flex; flex-direction: column; gap: 20px;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">🍽️</span> 餐品名称
                                </div>
                                <div style="flex-grow: 1;">
                                    <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                        <input type="text" placeholder="请输入 (≤20字)" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                    </div>
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">💰</span> 价格
                                </div>
                                <div style="flex-grow: 1;">
                                    <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                        <input type="text" placeholder="¥0.0" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                    </div>
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">📝</span> 餐品描述
                                </div>
                                <div style="flex-grow: 1;">
                                    <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                        <textarea placeholder="选填，最多100字" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px; min-height: 80px; resize: none;"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">📷</span> 图片上传
                                </div>
                                <div style="flex-grow: 1;">
                                    <div style="border: 1px dashed #ddd; border-radius: 8px; padding: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;">
                                        <div style="width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer;">
                                            <span style="font-size: 32px; color: #ddd;">+</span>
                                        </div>
                                        <div style="font-size: 12px; color: #999; width: 100%; text-align: center; margin-top: 8px;">支持多张图片上传，将以JSON数组格式存储图片URL</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">🕒</span> 用餐时间
                                </div>
                                <div style="flex-grow: 1;">
                                    <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                        <input type="datetime-local" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                    </div>
                                </div>
                            </div>
                            
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">🍴</span> 用餐类型
                                </div>
                                <div style="flex-grow: 1; display: flex; gap: 8px;">
                                    <div style="padding: 8px 16px; background: #FFF0F0; color: #FF9898; border-radius: 20px; font-size: 14px; cursor: pointer;" data-value="breakfast">早餐</div>
                                    <div style="padding: 8px 16px; background: #f5f5f5; color: #666; border-radius: 20px; font-size: 14px; cursor: pointer;" data-value="lunch">午餐</div>
                                    <div style="padding: 8px 16px; background: #f5f5f5; color: #666; border-radius: 20px; font-size: 14px; cursor: pointer;" data-value="dinner">晚餐</div>
                                    <div style="padding: 8px 16px; background: #f5f5f5; color: #666; border-radius: 20px; font-size: 14px; cursor: pointer;" data-value="snack">加餐</div>
                                </div>
                            </div>
                            
                            <!-- <div style="display: flex; align-items: center; gap: 12px; margin-top: 20px;">
                                <div style="width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 4px;">
                                    <span style="font-size: 18px;">🥗</span> 营养信息
                                </div>
                                <div style="flex-grow: 1; display: flex; flex-direction: column; gap: 12px;">
                                    <div style="display: flex; gap: 12px;">
                                        <div style="flex: 1;">
                                            <div style="font-size: 14px; margin-bottom: 4px;">蛋白质 (g/100g)</div>
                                            <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                                <input type="number" placeholder="0.0" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                            </div>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 14px; margin-bottom: 4px;">脂肪 (g/100g)</div>
                                            <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                                <input type="number" placeholder="0.0" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                            </div>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 14px; margin-bottom: 4px;">碳水化合物 (g/100g)</div>
                                            <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                                <input type="number" placeholder="0.0" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                            </div>
                                        </div>
                                    </div>
                                    <div style="font-size: 12px; color: #999;">注：三项营养成分总和不应超过100g</div>
                                </div>
                            </div> -->
                            
                            <!-- 注意：食品标签将在保存后由AI自动识别处理，无需在此步骤手动添加 -->
                            
                            <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px;">
                                <button style="padding: 10px 20px; border-radius: 8px; border: none; background: #f5f5f5; color: #666; font-size: 14px; cursor: pointer;">取消</button>
                                <button style="padding: 10px 20px; border-radius: 8px; border: none; background: #FF9898; color: white; font-size: 14px; cursor: pointer;">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="description-column">
                <div class="card">
                    <div class="card-header">
                        <span>功能需求描述</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">1. 食品粮仓功能</div>
                            <div class="requirement-desc">用户能够方便地记录每日饮食情况，包括食物名称、价格、描述和图片。系统应提供简洁的表单界面，允许用户快速添加新条目。</div>
                        </div>
                        <div class="requirement">
                            <div class="requirement-title">2. 健康评分系统</div>
                            <div class="requirement-desc">基于用户记录的食物数据，系统自动计算并显示每日饮食健康评分，帮助用户了解自己的饮食健康状况。评分应以直观的方式呈现。</div>
                        </div>
                        <div class="requirement">
                            <div class="requirement-title">3. 时间轴粮仓</div>
                            <div class="requirement-desc">以时间轴形式展示用户的饮食粮仓，使用户可以轻松查看历史饮食习惯。每条粮仓应显示关键信息和标签分类。</div>
                        </div>
                        <div class="requirement">
                            <div class="requirement-title">4. 智能推荐</div>
                            <div class="requirement-desc">根据用户的饮食习惯和健康目标，提供个性化的食品推荐。推荐内容应易于浏览并包含简要介绍。</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>交互说明</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">1. 新建粮仓交互流程</div>
                            <div class="requirement-desc">
                                <ol style="margin-left: 20px; color: #666;">
                                    <li>用户点击首页的"+"按钮，系统展示新建粮仓表单。</li>
                                    <li>用户填写必要信息（餐品名称），其他字段为选填。</li>
                                    <li>用户点击保存按钮，系统保存粮仓并返回首页，在时间轴上显示新添加的粮仓。</li>
                                    <li>如果用户点击取消，则不保存粮仓并返回首页。</li>
                                </ol>
                            </div>
                        </div>
                        <div class="requirement">
                            <div class="requirement-title">2. 底部导航栏</div>
                            <div class="requirement-desc">
                                <p style="color: #666; margin-bottom: 10px;">应用底部设置导航栏，包含以下四个选项：</p>
                                <ul style="margin-left: 20px; color: #666;">
                                    <li>首页：显示健康评分、时间轴粮仓和推荐。</li>
                                    <li>粮仓：展示历史饮食粮仓和统计数据。</li>
                                    <li>食坛：用户可以分享食谱和查看他人分享。</li>
                                    <li>我的：个人资料和设置页面。</li>
                                </ul>
                            </div>
                        </div>
                        <div class="requirement">
                            <div class="requirement-title">3. 语音输入</div>
                            <div class="requirement-desc">
                                <p style="color: #666;">用户可以使用语音输入快速记录饮食信息。系统应能识别语音中的关键信息并自动填充到相应表单字段。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>数据库表设计</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">1. 食品记录表 (food_records)</div>
                            <div class="requirement-desc">
                                <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                                    <tr style="background: #f5f5f5;">
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">food_name</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">2-50</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">汉字、字母</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">price</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">数值</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">最大10位，2位小数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">数字，最多两位小数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">description</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">TEXT</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">无限制</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">任意字符</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">images</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">JSON</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">无限制</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">图片URL数组，JSON格式</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">meal_time</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">datetime</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">YYYY-MM-DD HH:mm:ss</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">meal_type</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">枚举</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">breakfast/lunch/dinner/snack</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">datetime</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动设置创建时间</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">updated_at</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">datetime</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动更新修改时间</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                </table>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* user_id移除物理外键约束，由应用层维护数据一致性</p>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_user_meal (user_id, meal_time) - 优化用户时间轴查询</p>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_food_name (food_name) - 支持名称模糊查询</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">2. 分类维度表 (category_dimensions)</div>
                            <div class="requirement-desc">
                                <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                                    <tr style="background: #f5f5f5;">
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">dimension_name</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">≤15</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">如：食品类型/烹饪风格/营养特点</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                                    </tr>
                                </table>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 预置数据示例：食品类型、烹饪风格、营养特点、热量范围</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">3. 标签表 (tags)</div>
                            <div class="requirement-desc">
                                <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                                    <tr style="background: #f5f5f5;">
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">tag_name</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">≤20</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">汉字、字母</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">同层级唯一</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">parent_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">父级标签ID（逻辑自引用）</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">category_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">分类维度ID，关联category_dimensions.id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">calories_per_100g</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">每100克热量（大卡）</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                </table>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：UNIQUE uniq_tag_hierarchy (tag_name, parent_id, category_id) - 同一分类下名称唯一</p>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_category (category_id) - 优化按分类查询</p>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_parent (parent_id) - 优化层级关系查询</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">4. 食品-标签关联表 (food_tag_relations)</div>
                            <div class="requirement-desc">
                                <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                                    <tr style="background: #f5f5f5;">
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">food_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联food_records.id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">tag_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联tags.id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">is_primary</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">布尔值</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">是否主分类标签，默认FALSE</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">datetime</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">自动设置创建时间</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                </table>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_primary_tags (tag_id, is_primary) - 优化主标签查询</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">5. 营养明细表 (calorie_details)</div>
                            <div class="requirement-desc">
                                <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                                    <tr style="background: #f5f5f5;">
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">food_record_id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联food_records.id</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">protein</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">数值</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">最大5位，1位小数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">蛋白质（g/100g）</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">fat</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">数值</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">最大5位，1位小数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">脂肪（g/100g）</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd;">carbohydrate</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">数值</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">最大5位，1位小数</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">碳水化合物（g/100g）</td>
                                        <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                                    </tr>
                                </table>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 索引添加：idx_food_record (food_record_id) - 优化查询</p>
                                <p style="color: #666; font-style: italic; margin-top: 10px;">* 约束：CHECK (protein + fat + carbohydrate BETWEEN 0 AND 100) - 保证营养成分合理性</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <span>AI属性推荐</span>
            </div>
            <div class="card-content">
                <div class="prototype-preview">
                    <div class="prototype-nav">
                        🍽️ 食品属性识别
                    </div>
                    <div class="prototype-content">
                        <div style="padding: 0 16px;">
                            <div style="margin-bottom: 20px;">
                                <div style="display: flex; align-items: center; justify-content: space-between;">
                                    <div style="font-size: 18px; font-weight: 500; color: #333;">红烧牛肉面</div>
                                    <div style="font-size: 14px; color: #FF9898;">¥26.5</div>
                                </div>
                                <div style="margin-top: 8px; font-size: 14px; color: #666;">香浓牛肉汤底，配以嫩滑牛肉和劲道面条</div>
                            </div>

                            <div style="background: white; border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                        <div style="font-size: 20px;">🤖</div>
                                    </div>
                                    <div style="flex: 1;">
                                        <div style="font-size: 16px; font-weight: 500; margin-bottom: 4px;">AI智能识别结果</div>
                                        <div style="font-size: 13px; color: #999;">以下是系统根据您的记录智能生成的食品属性</div>
                                    </div>
                                </div>
                                
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px;">
                                    <div style="background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">食品类型</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                            <span class="tag">🍚 主食</span>
                                            <span class="tag">🍜 面食</span>
                                        </div>
                                    </div>
                                    <div style="background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">烹饪风格</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                            <span class="tag">🌶️ 川菜</span>
                                            <span class="tag">🍲 炖煮</span>
                                        </div>
                                    </div>
                                    <div style="background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">营养特点</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                            <span class="tag">🥩 高蛋白</span>
                                            <span class="tag">🍝 碳水化合物</span>
                                        </div>
                                    </div>
                                    <div style="background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">热量范围</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                            <span class="tag">🔥 中高热量</span>
                                            <span class="tag">➗ 430大卡</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div style="background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
                                    <div style="font-size: 14px; color: #666; margin-bottom: 8px;">营养成分</div>
                                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
                                        <div style="background: white; border-radius: 8px; padding: 10px; text-align: center;">
                                            <div style="font-size: 12px; color: #999; margin-bottom: 4px;">蛋白质</div>
                                            <div style="font-size: 16px; font-weight: 500; color: #FF9898;">18.5g</div>
                                        </div>
                                        <div style="background: white; border-radius: 8px; padding: 10px; text-align: center;">
                                            <div style="font-size: 12px; color: #999; margin-bottom: 4px;">脂肪</div>
                                            <div style="font-size: 16px; font-weight: 500; color: #FF9898;">12.3g</div>
                                        </div>
                                        <div style="background: white; border-radius: 8px; padding: 10px; text-align: center;">
                                            <div style="font-size: 12px; color: #999; margin-bottom: 4px;">碳水化合物</div>
                                            <div style="font-size: 16px; font-weight: 500; color: #FF9898;">45.8g</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div style="display: flex; justify-content: space-between; align-items: center; background: rgba(255,152,152,0.05); border-radius: 12px; padding: 12px;">
                                    <div style="font-size: 14px; color: #666;">对结果不满意？</div>
                                    <button style="background: linear-gradient(135deg, #FF9898, #FFB6C1); color: white; border: none; padding: 8px 16px; border-radius: 20px; font-size: 14px; box-shadow: 0 2px 8px rgba(255,152,152,0.3);">重新识别</button>
                                </div>
                            </div>
                            
                            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
                                <button style="background: linear-gradient(135deg, #FF9898, #FFB6C1); color: white; border: none; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500; box-shadow: 0 4px 12px rgba(255,152,152,0.3);">确认并保存</button>
                                <button style="background: white; color: #666; border: 1px solid #ddd; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500;">手动编辑属性</button>
                            </div>
                            
                            <div style="background: rgba(255,152,152,0.05); border: 1px dashed #FF9898; border-radius: 12px; padding: 16px; margin-bottom: 16px;">
                                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px;">AI小贴士</div>
                                <div style="font-size: 13px; color: #666; line-height: 1.6;">
                                    红烧牛肉面营养丰富，但热量较高。建议搭配蔬菜，控制摄入量，以保持营养均衡。
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-bar">
                            <div class="tab-item active">
                                <div class="tab-icon">🏠</div>
                                <div class="tab-text">首页</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">🌾</div>
                                <div class="tab-text">粮仓</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">🍽️</div>
                                <div class="tab-text">食坛</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">👤</div>
                                <div class="tab-text">我的</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <span>手动编辑属性</span>
            </div>
            <div class="card-content">
                <div class="prototype-preview">
                    <div class="prototype-nav">
                        🍽️ 编辑食品属性
                    </div>
                    <div class="prototype-content">
                        <div style="padding: 0 16px;">
                            <div style="margin-bottom: 20px;">
                                <div style="display: flex; align-items: center; justify-content: space-between;">
                                    <div style="font-size: 18px; font-weight: 500; color: #333;">红烧牛肉面</div>
                                    <div style="font-size: 14px; color: #FF9898;">¥26.5</div>
                                </div>
                            </div>

                            <div style="margin-bottom: 24px;">
                                <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">食品类型</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🍚 主食</span>
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🍜 面食</span>
                                    <span class="tag">🥗 沙拉</span>
                                    <span class="tag">🍲 汤类</span>
                                    <span class="tag">🍖 肉类</span>
                                    <span class="tag">🍤 海鲜</span>
                                    <span class="tag">🥦 蔬菜</span>
                                    <span class="tag">🍮 甜点</span>
                                    <span class="tag">🥤 饮品</span>
                                    <span class="tag">🍢 小吃</span>
                                </div>
                                
                                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 12px;">细分类别（基于已选食品类型）</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag">🥟 饺子/馄饨</span>
                                    <span class="tag">🍝 意面</span>
                                    <span class="tag">🍘 米制品</span>
                                    <span class="tag">🥪 三明治</span>
                                    <span class="tag">🌮 墨西哥卷</span>
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🍲 中式面条</span>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 24px;">
                                <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">烹饪风格</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🌶️ 川菜</span>
                                    <span class="tag">🥘 粤菜</span>
                                    <span class="tag">🍴 鲁菜</span>
                                    <span class="tag">🥢 苏菜</span>
                                    <span class="tag">🍱 浙菜</span>
                                    <span class="tag">🥡 闽菜</span>
                                    <span class="tag">🍜 湘菜</span>
                                    <span class="tag">🍛 徽菜</span>
                                </div>
                                
                                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 12px;">烹饪方式</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🍲 炖煮</span>
                                    <span class="tag">🍳 煎炒</span>
                                    <span class="tag">🔥 烧烤</span>
                                    <span class="tag">🥗 凉拌</span>
                                    <span class="tag">🍤 油炸</span>
                                    <span class="tag">🧂 腌制</span>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 24px;">
                                <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">营养特点</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🥩 高蛋白</span>
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🍝 碳水化合物</span>
                                    <span class="tag">🥑 高脂肪</span>
                                    <span class="tag">🥗 高纤维</span>
                                    <span class="tag">🥕 维生素丰富</span>
                                    <span class="tag">🧂 低钠</span>
                                    <span class="tag">🍬 低糖</span>
                                    <span class="tag">🥛 高钙</span>
                                </div>
                                
                                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 12px;">蛋白质来源</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag">🌱 植物蛋白</span>
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🥩 动物蛋白</span>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 24px;">
                                <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">热量范围</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
                                    <span class="tag">🍃 低热量 (<300大卡)</span>
                                    <span class="tag" style="background: #FFB6C1; color: white; border: none;">🔥 中热量 (300-600大卡)</span>
                                    <span class="tag">🔥🔥 高热量 (>600大卡)</span>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 24px;">
                                <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 12px;">营养成分详情</div>
                                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;">
                                    <div>
                                        <div style="font-size: 14px; margin-bottom: 4px;">蛋白质 (g/100g)</div>
                                        <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                            <input type="number" value="18.5" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                        </div>
                                    </div>
                                    <div>
                                        <div style="font-size: 14px; margin-bottom: 4px;">脂肪 (g/100g)</div>
                                        <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                            <input type="number" value="12.3" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                        </div>
                                    </div>
                                    <div>
                                        <div style="font-size: 14px; margin-bottom: 4px;">碳水化合物 (g/100g)</div>
                                        <div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
                                            <input type="number" value="45.8" step="0.1" min="0" max="100" style="width: 100%; padding: 10px 12px; border: none; outline: none; font-size: 14px;">
                                        </div>
                                    </div>
                                </div>
                                <div style="font-size: 12px; color: #999;">注：三项营养成分总和为76.6g，不超过100g</div>
                            </div>
                            
                            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
                                <button style="background: linear-gradient(135deg, #FF9898, #FFB6C1); color: white; border: none; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500; box-shadow: 0 4px 12px rgba(255,152,152,0.3);">确认并保存</button>
                                <button style="background: white; color: #666; border: 1px solid #ddd; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 500;">返回上一步</button>
                            </div>
                        </div>
                        
                        <div class="tab-bar">
                            <div class="tab-item active">
                                <div class="tab-icon">🏠</div>
                                <div class="tab-text">首页</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">🌾</div>
                                <div class="tab-text">粮仓</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">🍽️</div>
                                <div class="tab-text">食坛</div>
                            </div>
                            <div class="tab-item">
                                <div class="tab-icon">👤</div>
                                <div class="tab-text">我的</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加导航功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabItems = document.querySelectorAll('.tab-item');
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabText = this.querySelector('.tab-text').textContent;
                    if (tabText === '粮仓') {
                        window.location.href = 'records.html';
                    }
                    else if (tabText === '食坛') {
                        window.location.href = 'community.html';
                    }
                });
            });
        });

        function showRecommendation(mealType) {
            // 隐藏所有推荐内容
            const allRecommendations = document.querySelectorAll('.meal-recommendations');
            allRecommendations.forEach(rec => {
                rec.style.display = 'none';
            });
            
            // 显示选中的餐点推荐
            const selectedRec = document.getElementById(mealType + '-recommendations');
            if (selectedRec) {
                selectedRec.style.display = 'block';
            }
            
            // 更新选择按钮样式
            const allButtons = document.querySelectorAll('[data-meal-type]');
            allButtons.forEach(btn => {
                if (btn.getAttribute('data-meal-type') === mealType) {
                    btn.style.background = '#FFF0F0';
                    btn.style.color = '#FF9898';
                } else {
                    btn.style.background = '#f5f5f5';
                    btn.style.color = '#666';
                }
            });
        }
    </script>
</body>
</html> 